<template>
  <div class="todoapp">
    <!-- 3，使用组件 -->
    <TodoHeader :list="list" @addTack="addTackHeader"></TodoHeader>
    <TodoMain @cancelTack="cancelHeader" :list="showList"></TodoMain>
    <TodoFooter
      @changeTack="changeTackHeader"
      @clearTack="clearTackHeader"
      :list="showList"
    ></TodoFooter>
  </div>
</template>

<script>
//1，引入子组件
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
  //2,注册子组件
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      //拉取数据
      list: JSON.parse(localStorage.getItem("list") || "[]"),
      isAll: "all",
    };
  },
  methods: {
    addTackHeader(tackName) {
      this.list.push({
        id: this.list[this.list.length - 1].id + 1,
        name: tackName,
        isDone: false,
      });
    },
    cancelHeader(id) {
      // console.log(id);
      let index = this.list.findIndex((item) => item.id == id);
      this.list.splice(index, 1);
    },
    changeTackHeader(isAll) {
      //这个是通过子页面返回的属性，拿到当前返回回来的属性
      this.isAll = isAll;
      // console.log(isAll);
    },
    clearTackHeader() {
      this.list = this.list.filter((item) => !item.isDone);
    },
  },
  //当isAll 返回给父页面的时候，需要用到计算属性，来判断返回什么属性到list里面
  computed: {
    showList() {
      //筛选属性
      if (this.isAll === "no") {
        return this.list.filter((item) => item.isDone === false);
      } else if (this.isAll === "yes") {
        return this.list.filter((item) => item.isDone);
      } else {
        return this.list;
      }
    },
  },
  watch: {
    //监听的对象
    list: {
      deep: true, //深度监听
      handler() {
        //存到本地
        localStorage.setItem("list", JSON.stringify(this.list));
      },
    },
  },
};
</script>

<style lang="less" scoped>
</style>